<a id="aitems" target="_blank" rel="noopener noreferrer" href="<?= $block->getItemUrl($item)?>"><?=$item['name']?>
I have this "a" tag that is rendering 5 elements that are menu options. But I need that 4 of those 5 elements to open a new url on a different tab that's why I've added the target class. But of course if I do this way then the first "a" element will open on a new tab too and I dont want that.
This is what I'm trying to do
function addClass(){
const list = document.querySelector('#aitems');
// list[0].removeClass("target");
list[0].addClass("test1");
list.firstElementChild.classList.add("test");
}
addClass();
I'm just trying or to remove the class target from the first element or add the class target to the other 4 elements. It's always giving me errors that can't read classList or addClass. I've already tried with getElementById or byClassName
I'm doing this on a .phtml file.
So I eventually solved the problem ill leave it here if someone needs it
<a class="model-a" target="_blank" rel="noopener noreferrer" href="<?= $block->getItemUrl($item)?>"><?=$item['name']?>
</a>
function addClass() {
var divs = document.querySelectorAll('.model-a');
for (var i = 0; i < divs.length; i++) {
divs[0].classList.add('newclass');
divs[0].removeAttribute('target');
}
}
addClass();
The classList.add is not necessary but I will leave it.